import React, { useState, useEffect } from "react";
import LeftArraw from "../LeftArraw";
import { Custom } from "../Custom";
import style from "./style.module.scss";
import { Rate, Field } from "react-vant";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useSetState, useRequest } from "ahooks";
import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
import { putHttpParams } from "../../../../api";
import { useSelector } from "react-redux/es/hooks/useSelector";
import { addCookies } from "../../../../store/doctorDetail/doctorDetailSlice";
//当前页无put请求未完成
interface CurrentInquiryRecordHeader {
  userId: number;
  sessionId: string;
}
interface CurrentInquiryRecordParams {
  inquiryRecordId: number;
  doctorId: number;
  evaluate: string;
  majorDegree: number;
  satisfactionDegree: number;
}
// 定义问诊信息接口
interface IConsultationInfo {
  status: string;
  message: string;
}
const Index: React.FC = () => {
  const [searchParams] = useSearchParams()
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const doctorId = +searchParams.get('doctorId')!
  const recordId = useAppSelector((state) => state.doctor.recordId);
  const dispatch = useAppDispatch();

  const [inquiryParams, setInquiryParams] =
    useSetState<CurrentInquiryRecordHeader>({
      userId: userId,
      sessionId: sessionId,
    });
  const [params, setparams] = useSetState<CurrentInquiryRecordParams>({
    inquiryRecordId: recordId,
    doctorId: doctorId,
    evaluate: "",
    majorDegree: 1,
    satisfactionDegree: 1,
  });
  const getCurrentInquiryRecord = () =>
    putHttpParams(
      "/health/user/inquiry/verify/v1/evaluationInquiry",
      params,
      inquiryParams
    );

  // 使用useEffect hook在组件渲染后发起请求，获取当前问诊记录的数据
  const navigate = useNavigate();
  const goHistory = () => {
    navigate("/consultation/my/history");
  };
  const { run } = useRequest(
    async () => {
      const resp = await getCurrentInquiryRecord();
      dispatch(addCookies(resp.status));
      return resp.result;
    },
    {
      manual: true,
    }
  );
  const goResult = () => {
    run();
    navigate("/consultation/my/result");
  };
  return (
    <div>
      <LeftArraw title="评价问诊"></LeftArraw>
      <div className={style["container"]}>
        <Custom title="文字评价(送h币)"></Custom>
        <Field
          rows={1}
          value={params.evaluate}
          onChange={(e) => setparams({ evaluate: e })}
          type="textarea"
          placeholder="请输入你对医生的评价"
        />
      </div>
      <div className={style["containers"]}>
        <Custom title="星级评价"></Custom>
        <div className={style["rate"]}>
          <div>
            <p>医师专业度</p>
            <Rate
              value={params.majorDegree}
              onChange={(e) => setparams({ majorDegree: e })}
              color="rgb(38,112,229)"
            />
          </div>
          <div>
            <p>服务满意度</p>
            <Rate
              value={params.satisfactionDegree}
              onChange={(e) => setparams({ satisfactionDegree: e })}
              color="rgb(38,112,229)"
            />
          </div>
        </div>
      </div>
      <div className={style["footer"]}>
        <div className={style.btn}>
          <button className={style.btn1} onClick={goHistory}>
            返回
          </button>
          <button className={style.btn2} onClick={goResult}>
            完成
          </button>
        </div>
      </div>
    </div>
  );
};

export default Index;
